const tbody = document.querySelector('tbody')
const tfoot = document.querySelector('tfoot')
const addFruit = document.querySelector('tfoot button')
const fix = document.querySelector('.fix')
let id = 4
//计算总和模块,接收一个行参数
function sum(tr) {
    const sum = tr.children[4].children[0]
    const account = tr.children[3].children[1]
    const unpirce = tr.children[2]
    sum.innerHTML = +unpirce.innerHTML * +account.innerHTML
}
//获取商品数量
function countProduct(row){
    let count = 0
    const items = tbody.querySelectorAll(`tr td:nth-child(${row}) span`)
    const tar = document.querySelector(`tfoot td:nth-child(${row}) span`)
    items.forEach(item=>{
        count += +item.innerHTML
    })
    tar.innerHTML = count
}
//数量增加模块,删除模块
tbody.addEventListener('click', e => {
    if (e.target.nodeName == 'BUTTON') {
        const ele = e.target
        const tr = ele.parentNode.parentNode
        const account = tr.children[3].children[1]
        //数量增加模块
        if (ele.classList.contains('more')) {
            account.innerHTML = +account.innerHTML + 1
            sum(tr)//计算总和
        }
        //数量减少模块
        if (ele.classList.contains('less') && +account.innerHTML > 0) {
            account.innerHTML = +account.innerHTML - 1
            sum(tr)//计算总和
        }
        //删除模块
        if (ele.classList.contains('del')) {
            tbody.removeChild(tr)
            countProduct(4)
            countProduct(5)
        }
    }
})

//添加水果模块
addFruit.addEventListener('click', () => {
    fix.style.display = 'block'
})
const cancel = document.querySelector('#cancel')
const certain = document.querySelector('#certain')
cancel.addEventListener('click', () =>{
    const name = document.querySelector('.fix div:nth-child(1) input')
    const price = document.querySelector('.fix div:nth-child(2) input')
    fix.style.display = 'none'
    name.value = null
    price.value = null
})
certain.addEventListener('click', () => {
    const name = document.querySelector('.fix div:nth-child(1) input')
    const price = document.querySelector('.fix div:nth-child(2) input')
    //判断信息是否完整
    if (name.value && price.value) {
        if (!isNaN(price.value)) {
            fix.style.display = 'none'
            //插入数据
            id++
            const tr = document.createElement('tr')
            tr.innerHTML = `
            <tr>
                <td>${id}</td>
                <td>${name.value}</td>
                <td>${price.value}</td>
                <td>
                    <button class="less">-</button>
                    <span>0</span>
                    <button class="more">+</button>
                </td>
                <td><span>0<span></td>
                <td><button class="del">删除</button></td>
            </tr>`
            tbody.appendChild(tr)
            name.value = null
            price.value = null
        } else {
            alert('请输入正确信息')
        }
    } else {
        alert('请将信息填写完整')
    }
})
tbody.addEventListener('click',e=>{
    if(e.target.classList.contains('more') || e.target.classList.contains('less')){
        countProduct(4)
        countProduct(5)
    }
})